<template>
  <mt-popup v-model="popupVisible" position="right" :modal="false" class="accountStatement-details">
    <div class="page accountStatement-details">
      <div class="scroll-view">
        <customHeader middleTitle="对账单明细" @leftCallBack="popupHide"></customHeader>
        <div class="page-body" ref="page">
          <div class=" date-day mb20 ">
            <span>{{title}}</span>
          </div>
          <div class="view-header">
            <div class="tc">结算合计(元)</div>
            <div class="view-header_total tc">
              <span class="view-header-total-intint" v-if="CommonUtil.moneyFormate(billData.actualTotalAmount) != '--'">￥</span>
              <span class="view-header_total_int">{{ CommonUtil.moneyFormate(billData.actualTotalAmount) == '--' ? '--' : CommonUtil.moneyFormate(billData.actualTotalAmount).split('.')[0] }}</span>
              <span class="view-header-total-intint" v-if="CommonUtil.moneyFormate(billData.actualTotalAmount) != '--'">{{ CommonUtil.moneyFormate(billData.actualTotalAmount) == '--' ? '--' : '.' + CommonUtil.moneyFormate(billData.actualTotalAmount).split('.')[1] }}</span>
            </div>
            <div class="tip">
                结算合计=交易实收+其他补贴
            </div>
          </div>
          <div class="split-info">
            <div class="split-info-list" v-for="(item,index) in billData.splitStatisticsModelList" :key="index">
              <span class="name">{{splitInfoName(item.shopName)}}</span>
              <span class="amount">{{item.splitAmount}}</span>
            </div>
          </div>
          <div class="bgw">
            <div class="detail-cell">
              <span class="title">交易实收:</span>
              <div>{{CommonUtil.moneyFormate(billData.liquidationAmount)}}</div>
            </div>
            <ul class="detail">
              <li>
                  <span>收银实收</span>
                  <span>{{CommonUtil.moneyFormate(billData.tradeAmount)}}</span>
              </li>
              <li>
                  <span>收银实退</span>
                  <span>{{CommonUtil.moneyFormate(billData.refundsAmount,true)}}</span>
              </li>
              <li v-if="billData.joinMarketing">
                  <span>津贴实收</span>
                  <span>{{CommonUtil.moneyFormate(billData.encourageAmount)}}</span>
              </li>
              <li v-if="billData.joinMarketing">
                  <span>津贴实退</span>
                  <span>{{CommonUtil.moneyFormate(billData.encourageRefAmount,true)}}</span>
              </li>
              <li v-if="billData.joinMarketing">
                  <span>津贴发放</span>
                  <span>{{CommonUtil.moneyFormate(billData.ptShareAmount,true)}}</span>
              </li>
              <li v-if="billData.joinMarketing">
                  <span>服务费</span>
                  <span>{{CommonUtil.moneyFormate(billData.yxShareAmount,true)}}</span>
              </li>
              <li>
                  <span>手续费</span>
                  <span>{{CommonUtil.moneyFormate(billData.fee,true)}}</span>
              </li>
              <li v-if="billData.wxSubsidyReceiveAmount&&billData.wxSubsidyReceiveAmount-0">
                <span>微信营销补贴</span>
                <span>{{CommonUtil.moneyFormate(billData.wxSubsidyReceiveAmount)}}</span>
              </li>
              <li v-if="billData.zfbSubsidyReceiveAmount&&billData.zfbSubsidyReceiveAmount-0">
                <span>支付宝营销补贴</span>
                <span>{{CommonUtil.moneyFormate(billData.zfbSubsidyReceiveAmount)}}</span>
              </li>
              

              <div class="sub-tip">* 服务费包含软件服务费与营销服务费</div>
            </ul>
          </div>
          <div class="section">
            <ul class="details-list" v-show="expand">
              <li v-for="(item,index) in list" :key="index">
                <div class="pay-type">{{item['splitType']}} <span>{{CommonUtil.moneyFormate(item.liquidationAmount)}}</span></div>
                <ul class="bottom">
                  <li>
                    <span>收银实收</span>
                    <span>{{CommonUtil.moneyFormate(item.tradeAmount)}}</span>
                  </li>
                  <li>
                    <span>收银实退</span>
                    <span>{{CommonUtil.moneyFormate(item.refundsAmount,true)}}</span>
                  </li>
                  <li v-if="isShow(item)">
                    <span>津贴实收</span>
                    <span>{{CommonUtil.moneyFormate(item.encourageAmount)}}</span>
                  </li>
                  <li v-if="isShow(item)">
                      <span>津贴实退</span>
                      <span>{{CommonUtil.moneyFormate(item.encourageRefAmount,true)}}</span>
                  </li>
                  <li v-if="isShow(item,true)">
                      <span>津贴发放</span>
                      <span>{{CommonUtil.moneyFormate(item.ptShareAmount,true)}}</span>
                  </li> 
                  <li v-if="isShow(item,true)">
                    <span>服务费</span>
                    <span>{{CommonUtil.moneyFormate(item.yxShareAmount,true)}}</span>
                  </li>
                  <li v-if="item.payType!=8">
                    <span>手续费</span>
                    <span>{{CommonUtil.moneyFormate(item.fee,true)}}</span>
                  </li>
                  <li v-if="item.payType==5 && item.wxSubsidyReceiveAmount && item.wxSubsidyReceiveAmount-0">
                    <span>微信营销补贴</span>
                    <span>{{CommonUtil.moneyFormate(item.wxSubsidyReceiveAmount)}}</span>
                  </li>
                  <li v-if="item.payType==2 && item.zfbSubsidyReceiveAmount && item.zfbSubsidyReceiveAmount-0">
                    <span>支付宝营销补贴</span>
                    <span>{{CommonUtil.moneyFormate(item.zfbSubsidyReceiveAmount)}}</span>
                  </li>
                 
                </ul>
              </li>
            </ul>
            <div class="expand-section" :class="{active: expand}" v-show="list&&list.length" >
              <div @click.stop="hide">
                {{expand?"收起":"按支付方式查看"}}<span class="arrow" :class="{active: expand}"></span>
              </div>
            </div>
          </div>
           <div class="section-other" v-if="billData.yxSubsidyAmount||billData.ptSubsidyAmount">
              <div class="detail-cell">
                <span class="title">其他补贴</span>
                <div>{{CommonUtil.moneyFormate(billData.paymentTotalAmount)}}</div>
              </div>
              <ul class="detail">
                <li v-if="billData.yxSubsidyAmount">
                  <span>商户运营鼓励金</span>
                  <span>{{CommonUtil.moneyFormate(billData.yxSubsidyAmount)}}</span>
                </li>
                <li v-if="billData.ptSubsidyAmount">
                  <span>平台补贴</span>
                  <span>{{CommonUtil.moneyFormate(billData.ptSubsidyAmount)}}</span>
                </li>
              </ul>
           </div>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import moment from "moment";
import customHeader from "../../components/header/header";
import { Toast } from "mint-ui";

export default {
  name: "billDetails",
  props: {
    param: {
      type: Object
    },
    billData: {
      type: Object
    }
  },
  data() {
    return {
      moment: moment,
      popupVisible: false,
      expand: false,
      CommonUtil:CommonUtil
    };
  },
  computed: {
    title() {
      let txt = '';
      if(this.billData.startDate) {
        txt = moment(this.billData.startDate).format('YYYY-MM-DD');
        if(this.billData.type=='overview') txt += ' 至 '+moment(this.billData.endDate-1000).format('YYYY-MM-DD');
      }
      return txt;
    },
    list() {
      let data = this.billData.payTypeDataList || [];
      if(!data.length){
        return data;
      }
      const types = {
        1: "现金",
        2: "支付宝",
        4: "POS刷卡",
        5: "微信",
        7: "云闪付",
        8: "余额支付",
      };
      data.forEach(item => {
        
        item['splitType'] = types[item.payType];
        let sort=0;
        if(item.payType==1){
          sort=10;
        }else  if(item.payType==2){
          sort=1;
        }else  if(item.payType==4){
          sort=4;
        }else  if(item.payType==5){
          sort=2;
        }else  if(item.payType==7){
          sort=3;
        }else  if(item.payType==8){
          sort=11;
        }
        item["sort"]=sort;
      });
      data.sort((a,b)=>{return a['sort']-b['sort']});
      return data;
    },
    splitInfoName() {
      return function(name){
        let shortName = name;
        if (name != null) {
          if (name.length == 2) {
            shortName = name.substr(0, 1) + '*';
          } else if (name.length > 2) {
            shortName = name.substr(0, 1) + '*' + name.substr(name.length - 1, 1);
          }
        }
        return shortName
      }
    },
  },
  methods: {
    isShow(item,no8){
      if((item.payType!=1&&item.payType!=4&&item.payType!=7)&&this.billData.joinMarketing){
        if(no8){
          if(item.payType!=8){
            return true;
          }else{
            return false;
          }
        }else{
          return true;
        }
      }else{
        return false;
      }
    },
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
      this.expand = false;
    },
    hide() {
      setTimeout(()=> {
        this.expand = !this.expand;
        // let page = this.$refs.page;
        // page.scrollTop = 0;
        // page.style.top = 0;
        // page.style.overflow = 'scroll';
      }, 0);
      // this.$nextTick(()=> {
      //   let page = this.$refs.page;
      //   page.scrollTop = 1;
      //   page.style.top = 1;
      //   page.style.overflow = 'scroll';
      // }); 
    }
  },
  components: {
    customHeader
  }
};
</script>

<style lang='scss' scoped>
@import "accountStatement";
@import "./details.scss";
</style>